<!DOCTYPE html>
<html>

<head>
    <!-- 背景测试 -->
    <meta charset="utf-8">
    <title>背景图片background-size</title>


    <style>
        .bg {
            height: 200px;
            width: 100px;
            display: inline-block;
            margin: 10px;
            border: 1px solid red;
            background: url('https://www.runoob.com/try/demo_source/smiley.gif');
            /* background-repeat: no-repeat; */
        }

        .bg1{
            background-size: unset;
        }

        .bg2{
            background-size: cover;
        }

        .bg3{
            background-size: contain;
        }

        .bg4{
            background-size: 50% 50%;
        }

        .bg5{
            background-size: 50px 30px;
        }

    </style>

</head>

<body>
    <div class="bg bg1" ></div>
    <div class="bg bg2" ></div>
    <div class="bg bg3" ></div>
    <div class="bg bg4" ></div>
    <div class="bg bg5" ></div>


</body>

</html>